<template>
	<view>
		<view class="title">
			<view 
				v-for="(item, index) in navtitle" :key="index" class="title-item"
				style="position: relative;" @click="click(index)" 
				:style="{
					'background-color': indexArr[index] ? item.activeColor : '',
					'color': indexArr[index] ? item.activeFont : item.activeColor,
					'padding-left':`${padding}px`,
					'padding-right':`${padding}px`
				}"
				>
				{{item.title}}
				<view :style="{'border-bottom':`10px solid ${item.activeColor}`}" v-if="indexArr[index]" class="active"></view>
			</view>
		</view>
		<view :color="navtitle[activeIndex].activeColor" class="conent">
			<view v-if="isLoading" class="loading"></view>
			<slot v-else></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			navtitle:{
				type:Array,
				default:()=>[]
			},
			padding:{
				type: Number,
				default:() => 10
			},
			isLoading:{
				type: Boolean,
				default: () => false
			},
			activeIndex:{
				type: Number,
				default: () => 0
			}
		},
		mounted() {
			this.$emit('topChange',this.activeIndex)
		},
		computed:{
			indexArr(){
				const indexArr =[]; 
				this.navtitle.forEach( (ele,index) => {
					if(index === this.activeIndex){
						indexArr.push(true);
					}else{
						indexArr.push(false)
					}
				}); 
				return indexArr
			}
		},
		watch:{
			activeIndex(){
				this.indexArr.forEach( (ele,index) => {
					this.indexArr[index] = false;
					if(this.activeIndex === index){
						this.indexArr[index] = true
					}
				})
				this.$forceUpdate()
			}
		},
		methods:{
			click(index){
				this.$emit('topChange',index)
			}
		}
	}
</script>

<style lang="scss" scoped>
.active {
		position: absolute;
		left: 50%;
		bottom: -20px;
		width: 0px;
		height: 0px;
		transform: translateX(-50%);
		border-top:0px solid transparent;
		border-right:5px solid transparent;
		border-left:5px solid transparent;
}
.loading{
	background-image: url();
	background-repeat: no-repeat;
	background-position: center center;
	margin: 70px auto;
	width: 70px;
	height: 70px;
}
.title{
	display: flex;
	justify-content: space-between;
	height: 100px;
	margin-bottom: 30px;
	.title-item{
		&:first-child{
			margin-left: 0px;
		}
		&:last-child{
			margin-right: 0px;
		}
		margin: 0px 7.5px;
		box-sizing: border-box;
		padding: 30px 5px;
		text-align: center;
		flex: 1;
		width: 100%;
		height: 100%;
		background: rgba(248,249,250,1);
		border-radius:5px;
		font-size:16px;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(72,79,100,1);
	}
}
</style>
